<template>
    <div class="view-chart-wrapper" ref="chartWrapper"></div>
</template>

<script>
import BaseView from '../View.vue';
import chartOption from '@/assets/topo-data/chart-option.js';
import { getEchart } from '@/api/scada/echart';
import { getSecond } from '@/utils/topo/index';

export default {
    name: 'ChartWrapper',
    extends: BaseView,
    data() {
        return {
            echart: null,
            timer: null,
        };
    },
    computed: {
        echartRun() {
            const { echartOption, echartRun, echartData, filterRule } = this.detail.dataBind;
            this.$nextTick(function () {
                if (echartOption && echartRun > new Date().getTime() - 10000) {
                    let funStr = chartOption.getFun(echartOption);
                    try {
                        let fun = eval('(' + funStr + ')');
                        let opData = {};
                        if (echartData) {
                            opData = JSON.parse(echartData);
                            if (filterRule) {
                                const filtFunStr = 'function () {\n' + 'const data = opData;' + '\n' + filterRule + '\n' + '}';
                                let filtFun = eval('(' + filtFunStr + ')');
                                opData = filtFun();
                            }
                        }
                        let option = fun(this.$echarts, opData);
                        this.loadData(option);
                        this.onResize();
                        this.$message({ message: this.$t('topo.components.chart.073848-29'), type: 'success' });
                    } catch (err) {
                        console.log(err);
                        this.$message({
                            message: this.$t('topo.components.chart.073848-30'),
                            type: 'warning',
                        });
                    }
                }
            });
            return echartOption + echartRun;
        },
    },
    watch: {
        echartRun(newColor, oldColor) {
            // console.log('',newColor);
        },
    },
    mounted() {
        const { httpSetting } = this.detail.dataBind;
        const { url, time, unit } = httpSetting || {};
        if (this.editMode && url) {
            let second = 60 * 1000;
            if (!time) {
                second = getSecond(time, unit);
            }
            this.getEchartData();
            this.timer = setInterval(() => {
                this.getEchartData();
            }, second);
        } else {
            this.initEchart();
        }
    },
    methods: {
        loadData(option) {
            if (this.echart) {
                this.echart.dispose();
            }
            let view = this.$refs.chartWrapper;
            this.echart = this.$echarts.init(view, 'light');
            this.echart.setOption(option);
        },
        onResize(size) {
            if (this.echart) {
                this.echart.resize();
            }
        },
        initEchart() {
            let { echartOption } = this.detail.dataBind;
            if (!echartOption) {
                this.detail.dataBind.echartOption = chartOption.getOption();
                this.setEchartOption();
            } else if (echartOption.indexOf('echartId-') > -1) {
                let id = echartOption.split('-')[1];
                this.getEchartDataById(id);
            } else {
                this.setEchartOption();
            }
        },
        // 获取自定义echart详情
        getEchartDataById(id) {
            getEchart(id).then((res) => {
                if (res.code === 200) {
                    this.detail.dataBind.echartOption = res.data.echartData;
                    this.setEchartOption();
                }
            });
        },
        getEchartData() {
            const { httpSetting } = this.detail.dataBind;
            const { url, type, headers, params, body } = httpSetting;
            this.$request({
                url: url,
                method: type,
                headers: headers,
                params: params,
                data: body,
            }).then((res) => {
                this.detail.dataBind.echartData = JSON.stringify(res.data);
                this.initEchart();
            });
        },
        // 设置 option
        setEchartOption() {
            let { echartOption, echartData, filterRule } = this.detail.dataBind;
            let funStr = chartOption.getFun(echartOption);
            let fun = eval('(' + funStr + ')');
            let opData = {};
            if (echartData) {
                opData = JSON.parse(echartData);
                if (filterRule) {
                    const filtFunStr = 'function () {\n' + 'const data = opData;' + '\n' + filterRule + '\n' + '}';
                    let filtFun = eval('(' + filtFunStr + ')');
                    opData = filtFun();
                }
            }
            let option = fun(this.$echarts, opData);
            this.loadData(option);
            this.onResize();
        },
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    },
};
</script>

<style lang="scss">
.view-chart-wrapper {
    height: 100%;
    width: 100%;
    padding: 10px;
}
</style>
